<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <script src="js/jquery-1.10.1.min.js"></script>
    <style>
        li {
            margin: 5px 0;
            border: 1px solid #000;
        }
    </style>
</head>

<body>
    <div id="box" class="par" lang="zh-cn">
        <h3>Box</h3>
        <ul class="wrap">
            <li class="first">1</li>
            <h2>test</h2>
            <li>2</li>
            <li>3</li>
            <li class="last">4</li>
            <li><span><i>123123123</i></span></li>
        </ul>
    </div>
    <!-- <div id="box" class="par" lang="zh-cn">
        <h3>Box</h3>
        <ul class="wrap">
            <li class="">1</li>
            <li>2</li>
            <li>3</li>
            <li class="last">4</li>
        </ul>
    </div> -->
</body>
<script>
    // eq(i)  选取对应下标的元素

    /*
        $(".wrap li").eq(0)  选取对应下标的元素
        $(".wrap li").eq(-1)
     */

    // siblings()    选中 除匹配元素 以外的其他元素(同级元素)
    // siblings(str)   可以添加一个 选择器字符  进一步筛选选中元素
    /*
        $(".first").siblings()
        $(".wrap li").eq(1).css({ "background": "red" }).siblings().css({ background: "blue" })

        $("li").eq(0).siblings("li")
     */


    // hasClass()  判断选中元素是否含有某个类名  有→true ,否则返回false
    // $("#box").hasClass("par");  // true

    // filter  
    // 字符串  限定筛选范围
    // $("#box li").filter(".first");
    // $("#box li").filter(":not(.first)");
    // $("#box li").filter("[class]");

    // jquery对象
    // $("#box li").filter($(".first"));

    // 原生
    // var first = document.getElementsByClassName("first")[0];
    // $("#box li").filter(first);

    // 回调函数  function(index,item){   }    回调函数中 return 一个条件  当返回值为true的时候选取对应元素 
    /*
     var result = $("#box li").filter(function (index, item) {
         console.log(index, item, this);  // item  和 this  都是原生DOM元素
         // return this.classList.length > 0;  //原生判断
         // return $(item).prop("className");
         return $(item).is("[class]");
     })
     console.log(result);
  */
    // is  类似 arr.some()
    // is   根据选择器、DOM元素或 jQuery 对象来检测匹配元素集合，如果其中至少有一个元素符合这个给定的表达式就返回true。

    // 字符串  限定筛选范围
    // $("#box li").eq(0).is(".first");
    // $("#box li").eq(0).parent().is("ul");
    // $("#box").is(":has(h2)");

    // jquery
    // $("#box li").eq(0).is($(".first"));

    // 原生
    // var first = document.getElementsByClassName("first")[0];
    // $("#box li").eq(0).is(first);

    // 回调函数
    // var result = $("#box li").is(function (index, item) {
    //     // console.log(index, item);
    //     return $(item).hasClass("first");
    // })
    // console.log(result);



    // map   将一组元素转换成其他数组（不论是否是元素数组）
    var arr = $("#box li").map(function (index, item) {
        // return item.innerHTML;
        return $(item).html();
    }).get();
    console.log(arr);
    console.log(Array.from(arr));

    // get()   把jquery中的类数组转化为  真数组 
    $("#box li").get();

    // 还有一个是我们数组的 Array.from()


    // has()    （保留包含特定后代的元素）     =>筛选 匹配元素 中 包含特定后代的元素
    $("#box li").has("span");  //  li元素中  包含span的 li
    // $("#box li:has(span)");

    // not()  
    // 字符串   选择器表达式
    // var result = $("#box li").not(".first")

    // jquery 对象 
    // var result = $("#box li").not($(".first"))

    // 原生Dom 元素
    // var result = $("#box li").not($(".first")[0])

    // 回调函数    (不强求)
    // var result = $("#box li").not(function (index, item) {
    //     console.log(index, item);
    //     return $(item).prop("className") == "first";
    // });


    // slice(startIndex,endIndex); 
    // var result = $("#box li").slice(1, 3)



    // children()    匹配对应元素的子元素
    //  children(str)   字符串   选择器表达式
    // var result = $("#box .wrap").children();  // 
    // var result = $("#box .wrap").children("li");  // 
    // var result = $("#box .wrap").children("[class]");  // 

    // closest()   查找距离匹配元素最近的   某个元素(父代元素)

    // $(".first").closest("ul")

    // parent()     查找距离匹配元素的父元素
    // $(".first").parent().parent();

    // parents()     距离匹配元素的父代元素的集合
    // $(".first").parents("ul")


    // find()        查找匹配元素的子代元素   找出正在处理的元素的后代元素的好方法
    // $("#box").find("ul").find("li");

    // $("#box li:last").click(function () {
    //     //  $("#box li:last span");
    //     // $(this).children("span").css("color", "red");
    //     $(this).find("i").css("color", "red");
    // })


    // console.log(result);





</script>

</html>